<template>
  <div>
    <div v-show="isShow" :id="allmap" class="map" />
    <!-- <div class="map_box">
      <b-map :value="form.coordinate" @dimension="dimensions" />
    </div> -->
  </div>
</template>

<script>
export default {
  name: "OthersMapMap",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    allmap: {
      type: String,
      default: "allmap",
    },
  },
  data() {
    return {
      searchValue: "",
      isShow: false,
    };
  },
  watch: {
    value: function (newVal, oldVal) {
      if (newVal == "") return;
      this.searchValue = newVal;
      console.log("newVal", newVal);
      if (this.searchValue) {
        this.init();
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // dimensions(val) {
    //   console.log(val);
    //   console.log(this.indexs);
    //   // var _this = this;
    //   // _this.$set(this.expertList[this.indexs].location, val);
    //   this.expertList[this.indexs].location = val;

    //   // alert(val);
    // },
    init() {
      var _this = this;
      var map = new BMapGL.Map(_this.allmap, {
        minZoom: 8,
        maxZoom: 18,
      }); // 创建Map实例

      map.centerAndZoom(new BMapGL.Point(109.498031, 34.512557), 18); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
      map.addControl(zoomCtrl);
      // map.setHeading(64.5);
      // map.setTilt(73);
      // map.setDisplayOptions({
      //   skyColors: ["rgba(186, 0, 255, 0)", "rgba(186, 0, 255, 0.2)"],
      // });
      // 添加地图类型控件
      map.addControl(
        new BMapGL.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
        })
      );
      var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map },
      });
      local.search(this.searchValue);
      map.addEventListener("click", function (e) {
        _this.$emit("dimension", e.latlng.lng + "," + e.latlng.lat);
        _this.isShow = false;
        // alert("点击位置经纬度：" + e.latlng.lng + "," + e.latlng.lat);
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .anchorBL {
  display: none !important;
}
.map {
  width: 845px;
  height: 400px;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
